<template>
  <div class="layout-all">
    <el-table
      tooltip-effect="dark"
      ref='table_order_goods'
      :data="order_goods" :default-expand-all="true"
      @selection-change="handleSelectionChange"
    >

      <el-table-column type="selection" width="29" />
      <el-table-column align="center" prop="goods_id" label="编号" width="80" />
      <el-table-column align="center" prop="goods_title" label="商品名" minWidth="200" />
      <el-table-column align="center" prop="thumb" label="商品图片" width="150">
        <template slot-scope="scope">
          <el-popover
          placement="right"
          trigger="hover">
          <img :src="scope.row.thumb" class="imgStyle" style="max-height: 300px;max-width: 750px"/>
          <img slot="reference" :src="scope.row.thumb" style="max-height: 50px;max-width: 150px">
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="goods_num" label="商品数量" width="80" />
      <el-table-column align="center" prop="goods_price" label="单价" width="80" />
      <el-table-column align="center" prop="spec_key_name" label="规格" minWidth="200" >
        <template slot-scope="scope">
          {{scope.row.spec_key_name!=''?scope.row.spec_key_name:(scope.row.goods_append!=undefined&&scope.row.goods_append.drug_spec!=''?scope.row.goods_append.drug_spec:'')}}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="send_status" label="发货状态" width="80">
        <template slot-scope="scope">
          <el-tag :type="button_send_type[scope.row.send_status]" disable-transitions>{{button_send_str[scope.row.send_status]}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="refund_status" label="退款状态" width="80">
        <template slot-scope="scope">
          <el-tag :type="button_send_type[scope.row.refund_status]" disable-transitions>{{button_r_str[scope.row.refund_status]}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="is_commission" label="单独分佣" width="80" >
        <template slot-scope="scope"><el-tag :type="scope.row.is_commission?'success':'primary'">{{scope.row.is_commission?'是':'否'}}</el-tag></template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="remainder_amount"
        label="剩余金额"
        width="120"
      />
      <el-table-column
        align="center"
        prop="is_rebates"
        label="是否部分退款"
        width="120"
      >
        <template slot-scope="scope">
          <el-tag :type="button_send_type[scope.row.is_rebates]" disable-transitions>{{button_r1_str[scope.row.is_rebates]}}</el-tag>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="can_refund_amount" label="退款金额" width="150" /> -->
      <el-table-column
        align="center"
        prop="express_name"
        label="快递公司"
        width="100"
      />
      <el-table-column align="center" prop="express_sn" label="快递单号" width="150" />
              <el-table-column
          label=""
          align="center"
          type="expand"
          width="40">
          <template slot-scope="scope" v-if="scope.row.order_refund_logs!=undefined&&scope.row.order_refund_logs.length>0">
            <el-table
              
              tooltip-effect="dark"
              :data="scope.row.order_refund_logs"
            >
              <el-table-column align="center" prop="create_time" label="创建时间" width="160" />
              <el-table-column align="center" prop="status" label="退款状态" width="80">
                <template slot-scope="scope">
                  <el-tag :type="button_type[scope.row.status]" disable-transitions>{{scope.row.status_str}}</el-tag>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="action" label="退货方式" width="80">
                <template slot-scope="scope">
                  <el-tag :type="button_type[scope.row.action]" disable-transitions>{{scope.row.action_str}}</el-tag>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="images" label="图片" width="150">
                <template slot-scope="scope">
                  <el-button type="success" icon="el-icon-picture-outline" size="mini" circle v-if="scope.row.images.length>0" round @click="showRefundImg(scope.row)"/>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="refund_num" label="商品数量" width="80" />
              <el-table-column align="center" prop="refund_cause" label="退款原因"  />
              <el-table-column align="center" prop="refund_note" label="退款说明"  />
              <el-table-column align="center" prop="refund_reply" label="商家回复"  />
              <el-table-column align="center" prop="refund_sn" label="退款单号" width="220" />
              <el-table-column align="center" prop="express_sn" label="退货快递单号" width="220" />
            </el-table>
          </template>
        </el-table-column>
    </el-table>
    <!-- 退款图片 -->
      <el-dialog
        title="退款图片详情"
        :visible.sync="show_refund_img"
        width="30%"
      >
        <div v-for="(item,index) in refund_img" :key='index' style="display:inline-block;">
          <el-popover
            placement="right"
            trigger="hover">
            <img :src="item"  style="max-height: 400px;max-width: 750px"/>
            <img slot="reference" :src="item" style="max-height: 150px;max-width: 150px">
            </el-popover>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="show_refund_img=false">确 定</el-button>
        </span>
      </el-dialog>
  </div>
</template>

<script>
export default {
  props:['order_goods','checked'],
  name:'orderGoodsList',
  data() {
    return {
      button_type:['primary','success','warning','info','warning','danger',''],
      button_send_type:['warning','info','success','danger','primary',''],
      button_send_str:['未支付','待发货','已发货','已完成','已取消'],
      button_r_str:['无退款','退款中','已退款','拒绝退款','取消退款'],
      button_r1_str:['无退款','存在退款','完全退款'],
      show_refund_img:false,
      refund_img:[],
      
    };
  },
  onShow(){

  },
  mounted() {
    
  },
  methods: {
    handleSelectionChange(val){
        this.$emit("handleSelectionChange",val);
    },
    showRefundImg (info) {
        console.log(info)
        this.show_refund_img = true
        this.refund_img = info.images
    },
  },
  watch: {
    checked:{
      handler (val, oldVal) {
          this.$refs.table_order_goods.toggleAllSelection()
      },
      deep:true
    }
  }
};
</script>

<style>
.layout-all {
  margin-top: 20px;
  margin-left: 10px;
}
.layout-content {
  margin-top: 20px;
}
</style>>
